<template>
  <!-- 头部组件 -->
  <div class="header">
    <div
      class="left"
      @click="
        shower = !shower;
        shower2 = !shower2;
      "
    >
      <img src="../assets/image/Component 56.png" alt />
    </div>
    <div class="right" @click="toindex()">
      <img :src="baseURL + company.image" alt />
    </div>
    <div class="header_nav" v-show="shower">
      <div
        class="header_nav_item"
        v-for="(item, index) in muneList"
        :key="index"
        @click="shower2Fun(item, index)"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="header_nav2" v-show="shower2">
      <div
        class="header_nav_item"
        v-for="(items, indexs) in second"
        :key="indexs"
        @click="turn(items)"
      >
        {{ items.title }}
      </div>
    </div>
    <van-popup v-model="popup">
      <div class="phone">电话:{{ company.phone }}</div>
      <div><img :src="baseURL + company.codeimage" alt="" /></div>
    </van-popup>
  </div>
</template>
<script>
import { getNav, getCompany } from "../api/index/index";
export default {
  data() {
    return {
      popup: false,
      shower: false,
      shower2: false,
      muneList: [],
      second: [],
      company: {},
      msg: "主页",
      baseURL: this.$store.state.baseURL,
    };
  },
  mounted() {
    let vm = this;
    vm.getMenuList();
    vm.getCompany();
  },
  methods: {
    // 二级菜单显示
    shower2Fun(item, index) {
      console.log(index);
      this.second = item.second;
      this.shower2 = true;
      if (index == 6) {
        this.popup = true;
      }
    },
    toindex() {
      this.$router.push("/index");
    },
    // 跳转
    turn(items) {
      this.id = items.id;
      if (this.id == 14 || this.id == 15 || this.id == 16) {
        this.$router.push("/news?id=" + this.id);
      } else if (this.id == 29) {
        this.$router.push("/consultant");
      } else if (this.id == 24) {
        this.$router.push("/classLogin?id=" + this.id);
      } else if (this.id == 23) {
        this.$router.push("/classRe?id=" + this.id);
      } else if (
        this.id == 20 ||
        this.id == 21 ||
        this.id == 22 ||
        this.id == 30 ||
        this.id == 27
      ) {
        this.$router.push("/service?id=" + this.id);
      } else if (this.id == 7) {
        this.toindex();
      } else {
        this.$router.push("/about?id=" + this.id);
      }
    },
    //公司导航
    async getMenuList() {
      let vm = this;
      const res = await getNav();
      vm.muneList = res.data.data;
      console.log(res, "导航信息");
    },
    // 公司信息
    async getCompany() {
      let vm = this;
      const res = await getCompany();
      console.log(res);
      vm.company = res.data.data;
    },
  },

  created() {},
};
</script>

<style lang='less' scoped>
.phone {
  width: 100%;
  text-align: center;
}
.header {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  position: relative;
  //     flex-wrap: wrap;
  .left {
    width: 20px;
    height: 16px;
    margin-left: 16px;
    margin-top: 36px;
  }
  .right {
    margin-left: 75px;
    margin-top: 20px;
    img {
      width: 150px;
      height: 52px;
    }
  }
  // 一级菜单
  .header_nav {
    width: 89px;
    height: 144px;
    position: absolute;
    left: 31px;
    top: 65px;
    background: #595959;
    z-index: 10;
    .header_nav_item {
      width: 100%;
      height: 24px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      line-height: 18px;
      background-color: #595959;
    }
    :hover {
      background-color: #4b4b4b;
    }
  }
  // 二级菜单
  .header_nav2 {
    width: 89px;
    position: absolute;
    left: 120px;
    top: 78px;
    background: #595959;
    z-index: 10;
    .header_nav_item {
      width: 100%;
      height: 24px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      line-height: 18px;
    }
    :hover {
      background-color: #4b4b4b;
    }
  }
  // 选中加深
  .active {
    background-color: #eed8d8;
  }
}
</style>